<template>
<!-- 关联小说(商品库) -->
  <div>
    <a-spin tip="Loading..." :spinning="Loading">
      <div class="product-views">
        <div class="product-platform">
          <ul>
            <li :class="{ 'active-product-platform':ProductPlatformIndex === $index }" v-for="(item,$index) in productPlatform" :key="$index" @click="selectProductPlatform(item,$index)">
              <div class="li-list"><span>{{ item.name }}</span><a-icon type="right" /></div>
            </li>
          </ul>
        </div>
        <a-spin v-if="productList" class="product" tip="Loading..." :spinning="productLoading">
          <a-radio-group class="radio-group" @change="checkChange">
            <a-radio class="radio" :value="product" v-for="(product,index) in productList" :key="index" >
              {{ product.name }}
            </a-radio>
          </a-radio-group>
        </a-spin>
        <div v-else class="product no-data"></div>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { productPlatform,productList } from "@/api/headlinesApi";

export default {
  props:{
    selectAccountID:{
      type:String
    }
  },
  data(){
    return {
      queryParam:{
        advertiser_id:this.selectAccountID,
        product_platform_id:''
      },
      Loading:false,
      productLoading:false,
      ProductPlatformIndex:null, //当前选中 产品库
      productPlatform:'',  // 产品库
      productList:[],  // 产品
    }
  },
  created(){
    this.getList()
  },
  methods:{
    async getList(){
      this.Loading = true
      const res = await productPlatform(this.selectAccountID)
      this.productPlatform = res.data.list

      setTimeout(() => { this.Loading = false }, 200);
    },
    // 选择 产品库
    async selectProductPlatform(Platform,index){
      this.productLoading = true
      this.ProductPlatformIndex = index
      this.queryParam.product_platform_id =  Platform.platform_id

      const res = await productList(this.queryParam.advertiser_id,this.queryParam)
      this.productList = res.data.list
      setTimeout(() => { this.productLoading = false }, 200);
    },
    checkChange(product){
      let productPlatform = Object.assign( product.target.value,this.queryParam )
      this.$emit( 'input',productPlatform )
    }
  }
}
</script>

<style lang="less" scoped>
  ul,li{ margin: 0;padding: 0; }
  li{
    padding: 10px;
    margin-bottom: 2px;
    border-radius: 5px;
    border: 1px solid #F0F2F5;
    cursor: pointer;
  }
  .active-product-platform{
    border: 1px solid @active-color;
  }
  .ant-radio-wrapper-checked{
    border: 1px solid red;
  }
  .product-views{
    display: flex;
    width: 100%;
    min-height: 400px;
    .product-platform{
      width: 40%;
      padding:5px;
      border: 1px solid #F0F2F5;
      .li-list{
        display: flex;
        justify-content: space-between;
      }
    }
    .product{
      width: 60%;
      min-height:400px;
      border: 1px solid #F0F2F5;
      .radio-group{
        display: flex;
        overflow-y: auto;
        flex-wrap: wrap;
        padding: 10px;
        width: 100%;
        .radio{
          width:100%;
          padding: 10px 20px;
          border-radius: 5px;
          margin-bottom:5px;
          border: 1px solid #C9C9CA;
        }
      }
    }
  }

</style>